<template>
    <template v-for="im in modelData">
        <h2>{{ im.name }}</h2>
        <div class="flex-cc card_g">
            <template v-for="im1, ix1 in im.cards">
                <el-card shadow="hover" class="card" :class="im1.isTop && 'isTop'">
                    <!-- @click="() => $router.push({ name: 'edit', params: { children: im1.title }, query: { id: im1.id } })"> -->
                    <img :src="im1.img" />
                    <div class="flex-cc btn_g">
                        <el-button v-for="i in btns" link @click="i.fn(ix1, im1.id)">
                            <template v-if="im1.isTop && i.title == '置顶'">
                                <el-icon size="20px">
                                    <Hide />
                                </el-icon>
                                <div>取消置顶</div>
                            </template>
                            <template v-else>
                                <el-icon size="20px">
                                    <component :is="i.icon" />
                                </el-icon>
                                <div>{{ i.title }}</div>
                            </template>
                        </el-button>
                    </div>
                    <template #footer>
                        {{ im1.title }}
                    </template>
                </el-card>
            </template>
        </div>
    </template>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { useStore } from '@/stores'
import router from '@/router';
import { post } from '@/request/axiosset'
import { ElMessage, ElMessageBox } from 'element-plus';




const store = useStore()
const img = 'https://knowledge.bctools.cn/jvs-public/img/%E9%A3%8E%E6%99%AF/a4.png'
const modelData = reactive([])

const btns = [
    {
        icon: 'Edit',
        title: '编辑',
        fn(e, id) {
            router.push({
                name: 'edit',
                params: { children: modelData[0].cards[e].title },
                query: { id: id }
            })
        }
    },
    {
        icon: 'Delete',
        title: '删除',
        fn(e, id) {
            ElMessageBox.confirm('确定删除该工程？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => post(`/model-info/delete/${id}`, null,
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(({ data }) => {
                    if (data.code == 200) {
                        // modelData[0].cards.splice(e, 1)
                        store.asideMenu.splice(e, 1)
                        ElMessage.success('删除成功')
                    }
                })
            )
        }
    },
    {
        icon: 'More',
        title: '暂无',
        // icon: 'Download',
        // title: '下载',
        fn(e) {
            console.log(e);
        }
    },
    {
        icon: 'View',
        title: '置顶',
        fn(e, id) {
            const isTop = +!modelData[0].cards[e].isTop
            post('/model-info/topStatus', { modelId: id, isTop: isTop },
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
                .then(({ data }) => {
                    if (data.code == 200) {
                        console.log('🤰', modelData, store)
                        store.asideMenu[e].isTop = isTop
                        // modelData[0].cards[e].isTop = isTop
                    }
                })
        }
    },
]


const getAsideMenu = e => {
    modelData[0] = {
        name: '我的工程',
        cards: e.map(i => ({ id: i.id, title: i.name, img: img, isTop: i.isTop }))
    }
}
onMounted(() => {
    if (store.asideMenu) {
        getAsideMenu(store.asideMenu)
    }
})
watch(() => store.asideMenu, e => getAsideMenu(e), { deep: true })
</script>

<style scoped>
.card_g {
    flex-wrap: wrap;
    justify-content: start;
}

.card {
    max-width: 180px;
    margin: 20px 10px;
    position: relative;
    cursor: pointer;
    transition: .5s;

    .btn_g {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        background: #1e6fff;
        flex-wrap: wrap;
        padding: 20px 20px 80px;
        display: none;

        .el-button {
            color: #fff;
            margin: 0;
            width: 50%;

            &:hover>>>span {
                background-color: #ffffff30;
            }

            &>>>span {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                padding: 10px;
                border-radius: 3px;
                font-family: '黑体';
                font-size: 12px;
                width: 68px;
                height: 68px;
            }
        }
    }

    &>>>.el-card__body {
        padding: 0;
        width: 180px;
        height: 180px;
    }

    &>>>.el-card__footer {
        position: relative;
        height: 50px;
        padding: 10px;
    }

    img {
        width: 100%;
    }

    &:hover {
        transform: translateY(-3px);
        border: 1px solid var(--pyColor);

        .btn_g {
            display: block;
        }

        &>>>.el-card__footer {
            color: #FFF;
        }
    }

    &.isTop {
        order: -1;
    }
}
</style>